<template>
	<view class="">
		<view class="flex justify-between bg-white text-center text-[32rpx] font-bold">
			<view @click="changetbas(index)" v-for="(item,index) in label.list" class="pt-[14rpx] w-[50%] " :key="index"
				style="border-right: 1rpx solid #EFEFEF;">
				<view class="">
					<view class="mb-[22rpx]" :class="changeIndex == index ? 'text-[#FE861C]' : ''">{{item.name}}</view>
					<view class="w-[48rpx] " :class="changeIndex == index ? 'tbas' : ''">
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="changeIndex == 0">
			<view class="bg-white px-[20rpx] py-[30rpx] mt-[20rpx] mx-[20rpx] rounded-[20rpx] text-[30rpx] font-medium">
				<span class="pr-[10rpx] text-[#F32F2F]">*</span><span>反馈类型</span>
				<view class="flex justify-between">
					<view @click="qusIndex(item.feedbackType,index)" :key="index"
					class="flex mt-[23rpx] items-center flex-1 justify-center"
						v-for="(item,index) in labelqus.list">
						<view class="">
							<view :class="quetab == index ?'tabs':''"
								class="flex items-center  w-[28rpx] h-[28rpx] 
								rounded-[50%] 
								border border-[#ACACAC] 
								border-solid">
								<view :class="quetab == index ? 'tabss':''"
									class=""
									 style="margin: 0 auto; ">
								</view>
							</view>
						</view>
						<view class="ml-[10rpx]  text-[28rpx] ">
							{{item.name}}
						</view>
					</view>
				</view>

			</view>

			<!-- 3 -->
			<view class="bg-white px-[20rpx] py-[30rpx] mt-[20rpx] mx-[20rpx] rounded-[20rpx] text-[30rpx] font-medium">
				<view class="mb-[20rpx]">
					<span class="pr-[20rpx]  text-[#F32F2F]">*</span><span>问题或建议</span>
				</view>
       <view class="" style="position: relative;">
              		<view class="" >
              <u-textarea 
              v-model="ask" 
              class="" 
              maxlength="200" 
			  @change="textareachange"
			  placeholder-class="placeholderclass"
              placeholder="请留下您的宝贵意见，我们将努力改进。"
              >
              </u-textarea>	
              </view>
              <view class="" style="position: absolute; right: 20rpx;bottom: 10rpx; color: #c0c4cc">
              	{{ask.length>=200?200:ask.length}}/200
              </view>
              </view>
				<!-- <u-textarea v-model="ask" class="" height="200rpx" maxlength="200"  ref="textarea" @change="textareachange" placeholder="请留下您的宝贵意见，我们将努力改进。"  
					count></u-textarea> -->
			</view>
			<view class="bg-white px-[20rpx] py-[30rpx] mt-[20rpx] mx-[20rpx] rounded-[20rpx] text-[30rpx] font-medium">
				<view class="mb-[20rpx]">
					<span>上传图片</span>
				</view>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" class="mt-[30rpx]" name="1"
					multiple :maxCount="9"></u-upload>
			</view>
			<view class="bg-white px-[20rpx]  mt-[20rpx] mx-[20rpx] rounded-[20rpx] text-[30rpx] font-medium">
				<view class="flex h-[110rpx] text-[30rpx] items-center justify-between">
					<view class="flex items-center w-[170rpx]">
						<p>联系电话</p>
					</view>
					<!-- -->
					<view class="w-[220rpx]">
						<up--input v-model="phone" inputAlign="right" border="none" style=" background-color: white; "
							placeholder="请输入联系方式"></up--input>
					</view>

				</view>
			</view>


			<view class="py-[0rpx] px-[20rpx] w-full fixed left-0 bottom-[40rpx] box-border height: 98rpx;">
				<up-button @click="sendData()" :customStyle="{
					'border-radius': '20rpx',
					'font-size': '32rpx',
					'padding-left':'40rpx' ,
					'padding-right':'40rpx', 'height': '98rpx',
				}"
			 color="#FE861C">
					提交
				</up-button>
			</view>
		</view>
		<view class="bg-[#fff] mt-[20rpx]" v-else>
			<u-collapse>
				<u-collapse-item :title="mesionlist[index][0].typeName"  :icon="item[0].typeIcon" name="Docs guide" v-for="(item,index) in mesionlist" :key="index">
					<view class="" v-for="(items,indexs) in item" :key="indexs">
					<view class="text-[28rpx] font-bold text-[#000]">
						Q:{{items.question}}
					</view>
					<view v-html="items.answer">
					</view>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		
	
	</view>
</template>

<script setup>
	import {
		useStore
	} from '@/stores/user.js'
	const store = useStore();
	// baseUrl.value = uni.getStorageSync('url');

	import {
		BASE_URL
	} from "@/utils/Server/index.js"
	console.log("dffffffff", BASE_URL);
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'

	import {
		suggestion,questionlist
	} from '@/api/my.js'
	import {onReady} from "@dcloudio/uni-app"
  const textarea=ref(null)

 
  	const textareachange=(e)=>{
		if(e.length>=200){
			uni.showToast({
				icon:"none",
				title:"上限200字哦"
			})
		}
	}

	let changeIndex = ref(0)
	let changetbas = (e) => {
		changeIndex.value = e
	}
	const wttype=ref({1:"支付问题",2:"订单问题",3:"常见问题",4:"其他问题"})
	const mesionlist=ref([])
	import {onShow} from "@dcloudio/uni-app"
	onShow(()=>{
		questionlist().then((res)=>{
			if(res.code==200){
				mesionlist.value=res.result || []
			}else{
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		})
	})
	// 获取列表
	let label = reactive({
		list: [{
			name: '建议反馈',
			index: 0
		}, {
			name: '常见问题',
			index: 1
		}]
	})
	//问题
	let quetab = ref(0)
	let feedbackType = ref(1)
	let labelqus = reactive({
		list: [{
			name: '功能异常',
			index: 0,
			feedbackType: 1
		}, {
			name: '产品建议',
			index: 1,
			feedbackType: 2
		}, {
			name: '其他反馈',
			index: 2,
			feedbackType: 3
		}]
	})

	let qusIndex = (i, e) => {
		quetab.value = e
		feedbackType.value = i
	}
	let ask = ref('')
	let phone = ref()
	const fileList1 = ref([]);
	let sendData = () => {
		let data = {
			feedbackType: feedbackType.value,
			tel: phone.value,
			content: ask.value,
			images: Images.value
		}
		suggestion(data).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
				feedbackType.value = 1
				phone.value = ''
				ask.value = ''
				fileList1.value = []
				Images.value=[]
				quetab.value = 0
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 1000
				});
			}
		})
	}
	// 删除图片
	const deletePic = (event) => {
		fileList1.value.splice(event.index, 1);
		imgeList.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList1.value.length;
		lists.map((item) => {
			fileList1.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = fileList1.value[fileListLen];
			fileList1.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};
	let imgeList = ref([])
	let Images = ref([])
	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: store.uploadurl, // 仅为示例，非真实的接口地址
				header: {
					'Authorization': `${uni.getStorageSync('loginTokenKey')}`
				},
				filePath: url,
				name: 'file',
				success: (res) => {
					// console.log("成功",res);
					let dataee = JSON.parse(res.data);
					Images.value.push(dataee.result)
					// console.log("dataee",Images.value);
					imgeList.value.push(dataee)
					// console.log("dddd", imgeList.value);
					setTimeout(() => {
						resolve(res.data.data);
					}, 1000);
				},
			});
		});
	};
</script>

<style lang="scss" scoped>
	.tbas {
		margin: 0 auto;
		border: 2px solid #FE861C;
		border-radius: 4px 4px 0 0;
	}

	.tabs {
		border: 1px solid #FE861C;
	}

	.tabss {
		background-color: #FE861C;
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		text-align: center;
	}
	::v-deep .u-cell__body {
		padding-top: 30rpx !important;
		padding-bottom:30rpx !important;
	}
	.placeholderclass{
		font-weight: 100;
	}
	::v-deep(.input-placeholder){
		font-weight: 100;
	}
</style>